<template>
    <div class="home-video-detail" v-loading="loading">
        <div class="top-flex-box">
            <div class="left-flex-box">
                <div class="show-video-box">
                    <video
                        v-if="detail.mp4Url || detail.url"
                        controls="controls"
                        autoplay="autoplay"
                        class="video"
                        :src="detail.mp4Url || detail.url">
                    </video>
                    <span v-else>暂无视频，请点击下方按钮上传</span>
                </div>
                <uploadVideo :url="detail.url" :storageid="detail.storageid" @change="changeVideo" :noUploadVideo="$route.query.id"/>
            </div>
            <div class="right-flex-box">
                <el-form
                    :model="detail"
                    :rules="rules"
                    :hide-required-asterisk="true"
                    ref="detail"
                    label-width="140px"
                    class="input-no-border-box">
                    <el-form-item label="封面" prop="cover">
                        <!-- <div v-if="detail.sourceFrom === '用户上传(C端上传)' && $route.query.id">
                            <img :src="detail.cover" alt="" style="width: 150px;">
                        </div>
                        <uploadOwnImg v-model="detail.cover" v-else/> -->
                        <uploadOwnImg v-model="detail.cover" :needTransform="1"/>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <div v-if="detail.sourceFrom === '用户上传(C端上传)' && $route.query.id">
                            {{detail.title || '-'}}
                        </div>
                        <el-input type="textarea" v-model="detail.title" v-else></el-input>
                    </el-form-item>
                    <el-form-item label="关联游戏" prop="gameid">
                        <!-- <div v-if="detail.sourceFrom === '用户上传(C端上传)' && $route.query.id">
                            {{detail.gameName || '-'}}
                        </div> -->
                        <el-select
                            style="width:300px"
                            v-model="detail.gameid"
                            clearable
                            filterable
                            :filter-method="filterMethod"
                            :loading="gameLoading"
                            @change="gameChange"
                            placeholder="请输入并选择游戏">
                            <el-option
                                v-for="item in gameList"
                                :key="item.gameid"
                                :label="item.appName"
                                :value="item.gameid">
                                    <span style="float: left">
                                        <span>{{ item.appName }}</span>
                                        <span v-if="item.status === -1" style="color:red;font-size:12px;margin:0 5px;">下架</span>
                                    </span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频种类" prop="type" v-if="$route.query.id">
                        <span v-if="detail.type === 0">官方制作</span>
                        <span v-else-if="detail.type === 1">用户制作</span>
                        <span v-else-if="detail.type === 2">趣游戏制作</span>
                    </el-form-item>
                    <el-form-item label="视频种类" prop="type" v-else>
                        <el-select v-model="detail.type" placeholder="请选择渠道">
                            <el-option label="官方制作" :value="0"></el-option>
                            <el-option label="用户制作" :value="1"></el-option>
                            <el-option label="趣游戏制作" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频类型" prop="category">
                        <!-- <div v-if="detail.sourceFrom === '用户上传(C端上传)' && $route.query.id">
                            {{getTypeName(detail.category)}}
                        </div> -->
                        <el-select v-model="detail.category" @change="typeChange" placeholder="请选择视频类型">
                            <el-option :label="item.name" :value="item.category" v-for="(item, index) in videoTypeList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频来源" v-if="$route.query.id">
                        <span>{{detail.sourceFrom}}</span>
                    </el-form-item>
                    <!-- <el-form-item label="视频来源" v-else>
                        <el-select v-model="detail.sourceFrom" placeholder="请选择视频类型">
                            <el-option label="运营上传(后台上传)" value="运营上传(后台上传)"></el-option>
                            <el-option label="运营上传(C端上传)" value="运营上传(C端上传)"></el-option>
                            <el-option label="用户上传(C端上传)" value="用户上传(C端上传)"></el-option>
                            <el-option label="taptap采集" value="taptap采集"></el-option>
                            <el-option label="微博采集" value="微博采集"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- 如果是运营上传 -->
                    <el-form-item label="作者" prop="userid" v-if="detail.sourceFrom !== '用户上传(C端上传)'">
                        <el-select v-model="detail.userid" @change="userTypeChange" placeholder="请选择视频类型" style="width: 300px;">
                            <el-option :label="item.userName" :value="item.id" v-for="(item, index) in userList" :key="index">
                                <span style="float: left">{{ item.userName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 如果是用户上传 -->
                    <el-form-item label="作者" v-if="$route.query.id && detail.type === 1">
                        <div class="user-msg-box">
                            <div class="user-icon">
                                <img :src="detail.userIcon" alt="">
                            </div>
                            <div>{{detail.userName}}</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="发布时间" v-if="$route.query.id">
                        <span>{{detail.createTime | timeNo0}}</span>
                    </el-form-item>
                    <el-form-item label="修改时间" v-if="$route.query.id">
                        <span>{{detail.updateTime | timeNo0}}</span>
                    </el-form-item>
                    <el-form-item label="状态" prop="resource" v-if="$route.query.id">
                        <span v-if="detail.auditStatus >= 1">上架</span>
                        <span v-else-if="detail.auditStatus === 0">待审核</span>
                        <span v-else-if="detail.auditStatus === -3">已删除</span>
                        <span v-else>下架</span>
                    </el-form-item>
                    <el-form-item label="游戏首页推荐" prop="delivery">
                        <el-switch v-model="detail.showHome" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item label="游戏首页展示" v-if="detail.gameid">
                        <span class="go-game-detail" @click="goGameDetail">前往设置</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="about-msg-box" v-if="$route.query.id">
            <topTitle title="相关数据"/>
            <div>
                <b>点赞数：</b>
                <span>{{detail.thumbsNum || 0}}</span>

                <b style="margin-left: 20px;">点评数：</b>
                <span>{{detail.commentNum || 0}}</span>

                <b style="margin-left: 20px;">打赏金币：</b>
                <span>{{moneyInit(detail.rewardCoinNum)}}</span>

                <b style="margin-left: 20px;">打赏人数：</b>
                <span>{{detail.rewardNum || 0}}</span>

                <b style="margin-left: 20px;">举报数：</b>
                <span>{{detail.complainNum || 0}}</span>

                <b style="margin-left: 20px;">播放数：</b>
                <span>{{detail.playNum || 0}}</span>

                <b style="margin-left: 20px;">上传视频总数：</b>
                <span>{{detail.userVideoCount || 0}}</span>
            </div>
        </div>

        <div class="sumbmit-box">
            <el-button style="width:150px;" size="small" @click="goback">取 消</el-button>
            <el-button style="width:150px;" size="small" type="primary" @click="saveVideo" v-if="detail.videoid">保 存</el-button>
            <el-button style="width:150px;" size="small" type="success" @click="submitForm" v-else>新 建</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            gameLoading: false,
            gameList: [],
            userList: [],
            detail: {
                videoid: '',
                userid: '',
                gameid: '',
                url: '',
                size: 0,
                duration: null,
                cover: '',
                title: '',
                showType: 0,
                delStatus: 0,
                isDraft: 0,
                type: 0,
                gameTopic: null,
                auditStatus: 2,
                auditReason: null,
                storageid: null,
                rewardCoinNum: 0,
                thumbsNum: 0,
                commentNum: 0,
                shareNum: 0,
                playNum: 0,
                showHome: 0,
                homeWeight: null,
                height: 0,
                width: 0,
                createTime: '',
                updateTime: '',
                sourceFrom: '运营上传(后台上传)',
                adminId: null,
                adminName: null,
                userName: '',
                rewardNum: null,
                complainNum: null,
                category: '',
                categoryName: '',
                categoryIcon: '',
                identify: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                gameid: [
                    { required: true, message: '请关联游戏', trigger: 'change' }
                ],
                category: [
                    { required: true, message: '请选择视频视频类型', trigger: 'change' }
                ],
                userid: [
                    { required: true, message: '请选择视频作者', trigger: 'change' }
                ]
            },
            videoTypeList: []
        }
    },
    created () {
        this.getVideoTypeList()
        this.getselectGameUser()
        if (this.$route.query.id) {
            this.getDetail()
        }
        if (this.$route.query.gameid) {
            this.detail.gameid = this.$route.query.gameid
        }
        if (this.$route.query.name) {
            this.detail.gameName = this.$route.query.name
        }
    },
    methods: {
        // 获取视频详情
        async getDetail () {
            this.loading = true
            let res = await this.$http.post('/video/gameVideoDetail', {
                videoId: this.$route.query.id
            })
            if (res.code === '0') {
                if (res.data.gameName) {
                    this.getAllGameList(res.data.gameName)
                }
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 获取类型列表
        async getVideoTypeList () {
            let res = await this.$http.post('/video/findVideoCategory')
            this.videoTypeList = res.data || []
        },

        // 获取运营账号
        async getselectGameUser () {
            let res = await this.$http.get('/spider/selectGameUser')
            this.userList = res.data || []
        },

        // 查询游戏
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        },
        async getgameList (keyword) {
            let params = {
                keyword,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/home/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        // 查询所有游戏
        async getAllGameList (keyword) {
            let params = {
                keyword,
                pageIndex: 1,
                pageNum: 10
            }
            let res = await this.$http.post('/game/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        gameChange (val) {
            this.gameList.forEach(item => {
                if (item.gameid === val) {
                    this.detail.appName = item.appName
                }
            })
        },

        typeChange (val) {
            this.videoTypeList.forEach(item => {
                if (item.category === val) {
                    this.detail.categoryName = item.name
                    this.detail.categoryIcon = item.icon
                }
            })
        },

        userTypeChange (val) {
            this.userList.forEach(item => {
                if (item.id === val) {
                    this.detail.userName = item.userName
                }
            })
        },

        // 前往游戏详情
        goGameDetail () {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id: this.detail.gameid
                }
            })
            window.open(href, '_blank')
        },

        // 更改视频
        async saveVideo () {
            if (this.loading) return
            this.loading = true
            try {
                let res = await this.$http.post('/video/updateGameVideo', this.detail)
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
                this.loading = false
            } catch (error) {
                this.$message({
                    type: 'error',
                    message: '网络异常，请稍后再试'
                })
                this.loading = false
            }
        },

        // 新建视频
        async creatVideo () {
            if (!this.detail.url) {
                this.$message({
                    type: 'error',
                    message: '请上传视频！'
                })
                return
            }
            if (this.loading) return
            this.loading = true
            try {
                let res = await this.$http.post('/video/addGameVideo', this.detail)
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                    this.detail.videoid = res.data.videoid
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
                this.loading = false
            } catch (error) {
                this.$message({
                    type: 'error',
                    message: '网络异常，请稍后再试'
                })
                this.loading = false
            }
        },

        submitForm () {
            this.$refs.detail.validate((valid) => {
                if (valid) {
                    this.creatVideo()
                } else {
                    return false
                }
            })
        },

        moneyInit (money) {
            if (money) {
                if (money >= 10000) {
                    let num = parseInt(money / 10)
                    let result = num / 1000
                    return result + '万金币'
                } else {
                    return money + '金币'
                }
            }
            return '0'
        },

        getTypeName (category) {
            if (category) {
                let name
                this.videoTypeList.forEach(item => {
                    if (item.category === category) {
                        name = item.name
                    }
                })
                return name
            } else {
                return '-'
            }
        },

        // 返回
        goback () {
            this.$router.go(-1)
        },

        // 上传视频组建交互
        changeVideo (url, duration, storageid, cover, size, mp4Url) {
            this.detail.url = url || this.detail.url
            this.detail.duration = duration || this.detail.duration
            this.detail.storageid = storageid || this.detail.storageid
            this.detail.cover = cover || this.detail.cover
            this.detail.size = size || this.detail.size
            this.detail.mp4Url = mp4Url || this.detail.mp4Url
        }
    },
    components: {
        // uploadVideo
    },

    watch: {
        detail: {
            handler: function (val) {
                if (val.cover) {
                    this.$refs.detail.validateField('cover', (valid) => {
                        if (valid) {
                        } else {
                            return false
                        }
                    })
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
    .home-video-detail {
        .top-flex-box {
            display: flex;
            .left-flex-box {
                width: 400px;
                padding: 0 20px;
                .show-video-box {
                    height: 640px;
                    // background-color: #000000;
                    border: 1px dashed #cccccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .video {
                        width: 100%;
                        max-height: 100%;
                        outline: none;
                    }
                }
            }
            .right-flex-box {
                flex: 1;
                .user-msg-box {
                    display: flex;
                    align-items: center;
                    .user-icon {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        margin-right: 10px;
                        overflow: hidden;
                        > img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .about-msg-box {
            padding-left: 20px;
        }

        .sumbmit-box {
            width: 500px;
            margin: 30px auto 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .go-game-detail {
            font-size: 12px;
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>
